<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多功能文本编辑器 - 作业基础版</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #f5f5f5;
        height: 100vh;
        overflow: hidden;
      }

      .editor-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: white;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      }

      .editor-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .editor-title {
        font-size: 1.5em;
        font-weight: 600;
      }

      .editor-status {
        display: flex;
        gap: 20px;
        font-size: 0.9em;
        opacity: 0.9;
      }

      .status-item {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4caf50;
      }

      .status-indicator.saving {
        background: #ff9800;
        animation: pulse 1s infinite;
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      .toolbar {
        background: #fafafa;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 20px;
        display: flex;
        gap: 15px;
        align-items: center;
        flex-wrap: wrap;
      }

      .toolbar-group {
        display: flex;
        gap: 5px;
        align-items: center;
        padding-right: 15px;
        border-right: 1px solid #e0e0e0;
      }

      .toolbar-group:last-child {
        border-right: none;
      }

      .toolbar-btn {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .toolbar-btn:hover {
        background: #f0f0f0;
        border-color: #ccc;
      }

      .toolbar-btn.active {
        background: #667eea;
        color: white;
        border-color: #667eea;
      }

      .toolbar-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .toolbar-select {
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        font-size: 14px;
        cursor: pointer;
      }

      .editor-main {
        display: flex;
        flex: 1;
        overflow: hidden;
      }

      .editor-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
      }

      .editor-workspace {
        flex: 1;
        position: relative;
        overflow: hidden;
      }

      .editor-textarea {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        padding: 20px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.6;
        resize: none;
        background: white;
      }

      .editor-footer {
        background: #f5f5f5;
        border-top: 1px solid #e0e0e0;
        padding: 8px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #666;
      }

      .footer-left {
        display: flex;
        gap: 20px;
      }

      .footer-right {
        display: flex;
        gap: 20px;
      }

      .context-menu {
        position: fixed;
        background: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        min-width: 150px;
        padding: 5px 0;
      }

      .context-menu-item {
        padding: 8px 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        transition: background 0.2s ease;
      }

      .context-menu-item:hover {
        background: #f0f0f0;
      }

      .context-menu-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .context-menu-divider {
        height: 1px;
        background: #e0e0e0;
        margin: 5px 0;
      }

      .shortcut {
        margin-left: auto;
        font-size: 12px;
        color: #999;
      }

      .search-replace {
        position: absolute;
        top: 10px;
        right: 10px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 500;
        min-width: 300px;
      }

      .search-input {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 14px;
      }

      .search-actions {
        display: flex;
        gap: 5px;
        justify-content: flex-end;
      }

      .search-btn {
        padding: 4px 8px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
      }

      .search-btn:hover {
        background: #f0f0f0;
      }

      .drag-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(102, 126, 234, 0.1);
        border: 2px dashed #667eea;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
        color: #667eea;
        font-weight: 600;
        z-index: 1000;
      }

      .toast {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #4caf50;
        color: white;
        padding: 12px 20px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 3000;
        animation: slideInRight 0.3s ease;
      }

      .toast.error {
        background: #f44336;
      }

      .toast.warning {
        background: #ff9800;
      }

      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(100%);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      /* 作业提示样式 */
      .assignment-hint {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 4px;
        padding: 10px;
        margin: 10px;
        font-size: 12px;
        color: #856404;
      }

      .assignment-hint strong {
        color: #d63031;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="editor-container">
        <!-- 编辑器头部 -->
        <div class="editor-header">
          <div class="editor-title">多功能文本编辑器 - 作业版</div>
          <div class="editor-status">
            <div class="status-item">
              <div class="status-indicator" :class="{ saving: isSaving }"></div>
              <span>{{ saveStatus }}</span>
            </div>
            <div class="status-item">
              <span>{{ currentTime }}</span>
            </div>
          </div>
        </div>

        <!-- 工具栏 -->
        <div class="toolbar">
          <div class="toolbar-group">
            <!-- 任务1: 完成工具栏按钮的点击事件 -->
            <div class="assignment-hint">
              <strong>任务1:</strong>
              为以下按钮添加 @click 事件处理
            </div>
            <button class="toolbar-btn" title="新建文件 (Ctrl+N)">📄 新建</button>
            <button class="toolbar-btn" title="打开文件 (Ctrl+O)">📁 打开</button>
            <button class="toolbar-btn" title="保存文件 (Ctrl+S)">💾 保存</button>
            <button class="toolbar-btn" title="另存为 (Ctrl+Shift+S)">📋 另存为</button>
          </div>

          <div class="toolbar-group">
            <!-- 任务2: 添加撤销/重做按钮的事件和状态控制 -->
            <div class="assignment-hint">
              <strong>任务2:</strong>
              添加 @click 事件和 :disabled 属性绑定
            </div>
            <button class="toolbar-btn" title="撤销 (Ctrl+Z)">↶ 撤销</button>
            <button class="toolbar-btn" title="重做 (Ctrl+Y)">↷ 重做</button>
          </div>

          <div class="toolbar-group">
            <!-- 任务3: 完成编辑操作按钮 -->
            <button class="toolbar-btn" title="剪切 (Ctrl+X)">✂️ 剪切</button>
            <button class="toolbar-btn" title="复制 (Ctrl+C)">📋 复制</button>
            <button class="toolbar-btn" title="粘贴 (Ctrl+V)">📌 粘贴</button>
          </div>

          <div class="toolbar-group">
            <button class="toolbar-btn" title="查找替换 (Ctrl+F)">🔍 查找</button>
            <button class="toolbar-btn" title="全选 (Ctrl+A)">📝 全选</button>
          </div>

          <div class="toolbar-group">
            <!-- 任务4: 添加下拉选择器的事件处理 -->
            <div class="assignment-hint">
              <strong>任务4:</strong>
              添加 v-model 和 @change 事件
            </div>
            <select class="toolbar-select">
              <option value="12">12px</option>
              <option value="14" selected>14px</option>
              <option value="16">16px</option>
              <option value="18">18px</option>
              <option value="20">20px</option>
              <option value="24">24px</option>
            </select>

            <select class="toolbar-select">
              <option value="Consolas" selected>Consolas</option>
              <option value="Monaco">Monaco</option>
              <option value="Courier New">Courier New</option>
              <option value="Arial">Arial</option>
              <option value="Times New Roman">Times New Roman</option>
            </select>
          </div>

          <div class="toolbar-group">
            <button class="toolbar-btn" title="自动换行">📄 换行</button>
            <button class="toolbar-btn" title="全屏模式 (F11)">🔲 全屏</button>
          </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="editor-main">
          <!-- 编辑器内容 -->
          <div class="editor-content">
            <!-- 编辑器工作区 -->
            <div class="editor-workspace">
              <!-- 任务5: 添加拖拽事件处理 -->
              <div class="assignment-hint">
                <strong>任务5:</strong>
                为工作区添加 @drop, @dragover.prevent, @dragenter.prevent 事件
              </div>

              <!-- 拖拽覆盖层 -->
              <div v-if="isDragging" class="drag-overlay">📁 拖拽文件到这里打开</div>

              <!-- 任务6: 添加右键菜单事件 -->
              <div class="assignment-hint">
                <strong>任务6:</strong>
                为文本区域添加 @contextmenu.prevent 事件
              </div>

              <!-- 文本编辑区 -->
              <!-- 任务7: 添加键盘事件处理 -->
              <div class="assignment-hint">
                <strong>任务7:</strong>
                为 textarea 添加 @keydown 事件处理快捷键
              </div>
              <textarea
                ref="textarea"
                class="editor-textarea"
                v-model="content"
                placeholder="开始输入您的内容...

作业提示：
1. 尝试使用 Ctrl+N 新建文件
2. 尝试使用 Ctrl+S 保存文件
3. 尝试使用 Ctrl+Z 撤销操作
4. 尝试使用 Ctrl+F 打开查找面板
5. 右键点击查看上下文菜单
6. 拖拽文本文件到编辑器

请完成以下Vue事件处理任务：
- 工具栏按钮点击事件
- 键盘快捷键处理
- 右键菜单显示
- 文件拖拽功能
- 查找替换功能"
                spellcheck="false"
              ></textarea>

              <!-- 查找替换面板 -->
              <div v-if="showSearchPanel" class="search-replace">
                <!-- 任务8: 完成查找替换功能 -->
                <div class="assignment-hint">
                  <strong>任务8:</strong>
                  添加查找输入框的事件处理
                </div>
                <input v-model="searchText" class="search-input" placeholder="查找内容" />
                <input v-model="replaceText" class="search-input" placeholder="替换为" />
                <div class="search-actions">
                  <button class="search-btn">上一个</button>
                  <button class="search-btn">下一个</button>
                  <button class="search-btn">替换</button>
                  <button class="search-btn">全部替换</button>
                  <button class="search-btn">关闭</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 状态栏 -->
        <div class="editor-footer">
          <div class="footer-left">
            <span>行 {{ cursorPosition.line }}, 列 {{ cursorPosition.column }}</span>
            <span>选中 {{ selectionLength }} 个字符</span>
            <span>编码: UTF-8</span>
          </div>
          <div class="footer-right">
            <span>Plain Text</span>
            <span>字符数: {{ content.length }}</span>
          </div>
        </div>
      </div>

      <!-- 任务9: 完成右键菜单 -->
      <div
        class="assignment-hint"
        style="position: fixed; top: 50%; right: 10px; width: 200px; z-index: 2000"
      >
        <strong>任务9:</strong>
        实现右键菜单的显示和隐藏
      </div>

      <!-- 右键菜单 -->
      <div
        v-if="contextMenu.show"
        class="context-menu"
        :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
      >
        <div class="context-menu-item">
          <span>撤销</span>
          <span class="shortcut">Ctrl+Z</span>
        </div>
        <div class="context-menu-item">
          <span>重做</span>
          <span class="shortcut">Ctrl+Y</span>
        </div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item">
          <span>剪切</span>
          <span class="shortcut">Ctrl+X</span>
        </div>
        <div class="context-menu-item">
          <span>复制</span>
          <span class="shortcut">Ctrl+C</span>
        </div>
        <div class="context-menu-item">
          <span>粘贴</span>
          <span class="shortcut">Ctrl+V</span>
        </div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item">
          <span>全选</span>
          <span class="shortcut">Ctrl+A</span>
        </div>
        <div class="context-menu-item">
          <span>查找替换</span>
          <span class="shortcut">Ctrl+F</span>
        </div>
      </div>

      <!-- 提示消息 -->
      <div v-if="toast.show" class="toast" :class="toast.type">{{ toast.message }}</div>
    </div>

    <script>
      const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue

      createApp({
        setup() {
          // 基础状态
          const textarea = ref(null)
          const content = ref('欢迎使用多功能文本编辑器作业版！\n\n请完成以下Vue事件处理任务...')
          const showSearchPanel = ref(false)
          const isDragging = ref(false)
          const isSaving = ref(false)

          // 编辑器设置
          const fontSize = ref(14)
          const fontFamily = ref('Consolas')

          // 光标位置
          const cursorPosition = ref({ line: 1, column: 1 })
          const selectionLength = ref(0)

          // 搜索替换
          const searchText = ref('')
          const replaceText = ref('')

          // 当前时间
          const currentTime = ref('')

          // 保存状态
          const saveStatus = computed(() => {
            if (isSaving.value) return '保存中...'
            return '作业模式'
          })

          // 右键菜单
          const contextMenu = reactive({
            show: false,
            x: 0,
            y: 0
          })

          // 提示消息
          const toast = reactive({
            show: false,
            type: 'success',
            message: ''
          })

          // 更新时间
          const updateTime = () => {
            const now = new Date()
            currentTime.value = now.toLocaleTimeString()
          }

          // 显示提示消息
          const showToast = (message, type = 'success') => {
            toast.message = message
            toast.type = type
            toast.show = true
            setTimeout(() => {
              toast.show = false
            }, 3000)
          }

          // ==========================================
          // 学生需要完成的函数（目前为空或简单实现）
          // ==========================================

          // 任务1: 文件操作函数
          const newFile = () => {
            // TODO: 学生需要实现新建文件功能
            showToast('请实现新建文件功能', 'warning')
          }

          const openFile = () => {
            // TODO: 学生需要实现打开文件功能
            showToast('请实现打开文件功能', 'warning')
          }

          const saveFile = () => {
            // TODO: 学生需要实现保存文件功能
            showToast('请实现保存文件功能', 'warning')
          }

          const saveAsFile = () => {
            // TODO: 学生需要实现另存为功能
            showToast('请实现另存为功能', 'warning')
          }

          // 任务2: 编辑操作函数
          const undo = () => {
            // TODO: 学生需要实现撤销功能
            showToast('请实现撤销功能', 'warning')
          }

          const redo = () => {
            // TODO: 学生需要实现重做功能
            showToast('请实现重做功能', 'warning')
          }

          const cut = () => {
            // TODO: 学生需要实现剪切功能
            showToast('请实现剪切功能', 'warning')
          }

          const copy = () => {
            // TODO: 学生需要实现复制功能
            showToast('请实现复制功能', 'warning')
          }

          const paste = () => {
            // TODO: 学生需要实现粘贴功能
            showToast('请实现粘贴功能', 'warning')
          }

          const selectAll = () => {
            // TODO: 学生需要实现全选功能
            showToast('请实现全选功能', 'warning')
          }

          // 任务3: 查找替换函数
          const toggleSearch = () => {
            // TODO: 学生需要实现切换搜索面板显示
            showToast('请实现查找面板切换功能', 'warning')
          }

          const findNext = () => {
            // TODO: 学生需要实现查找下一个
            showToast('请实现查找下一个功能', 'warning')
          }

          const findPrevious = () => {
            // TODO: 学生需要实现查找上一个
            showToast('请实现查找上一个功能', 'warning')
          }

          const replaceNext = () => {
            // TODO: 学生需要实现替换下一个
            showToast('请实现替换下一个功能', 'warning')
          }

          const replaceAll = () => {
            // TODO: 学生需要实现全部替换
            showToast('请实现全部替换功能', 'warning')
          }

          // 任务4: 格式设置函数
          const updateFontSize = () => {
            // TODO: 学生需要实现字体大小更新
            showToast('请实现字体大小更新功能', 'warning')
          }

          const updateFontFamily = () => {
            // TODO: 学生需要实现字体类型更新
            showToast('请实现字体类型更新功能', 'warning')
          }

          const toggleWordWrap = () => {
            // TODO: 学生需要实现自动换行切换
            showToast('请实现自动换行切换功能', 'warning')
          }

          const toggleFullscreen = () => {
            // TODO: 学生需要实现全屏切换
            showToast('请实现全屏切换功能', 'warning')
          }

          // 任务5: 事件处理函数
          const handleKeydown = event => {
            // TODO: 学生需要实现键盘快捷键处理
            // 提示：需要处理 Ctrl+N, Ctrl+S, Ctrl+Z, Ctrl+Y, Ctrl+F 等快捷键
            console.log('按键事件:', event.key, event.ctrlKey)
          }

          const handleDrop = event => {
            // TODO: 学生需要实现文件拖拽处理
            event.preventDefault()
            showToast('请实现文件拖拽功能', 'warning')
          }

          const showContextMenu = event => {
            // TODO: 学生需要实现右键菜单显示
            showToast('请实现右键菜单功能', 'warning')
          }

          const updateSelection = () => {
            // TODO: 学生需要实现选择状态更新
            // 提示：需要更新光标位置和选中长度
          }

          // 全局事件监听
          const handleGlobalClick = event => {
            // TODO: 学生需要实现全局点击处理（关闭右键菜单等）
          }

          // 生命周期
          onMounted(() => {
            // 更新时间
            updateTime()
            setInterval(updateTime, 1000)

            // 添加全局事件监听
            document.addEventListener('click', handleGlobalClick)

            // 聚焦到文本区域
            nextTick(() => {
              if (textarea.value) {
                textarea.value.focus()
              }
            })

            // 显示欢迎消息
            showToast('欢迎使用文本编辑器作业版！请完成各项任务。', 'success')
          })

          // 返回响应式数据和方法
          return {
            // 引用
            textarea,

            // 状态
            content,
            showSearchPanel,
            isDragging,
            isSaving,

            // 设置
            fontSize,
            fontFamily,

            // 光标和选择
            cursorPosition,
            selectionLength,

            // 搜索
            searchText,
            replaceText,

            // 状态
            currentTime,
            saveStatus,

            // UI组件
            contextMenu,
            toast,

            // 文件操作
            newFile,
            openFile,
            saveFile,
            saveAsFile,

            // 编辑操作
            undo,
            redo,
            cut,
            copy,
            paste,
            selectAll,

            // 搜索替换
            toggleSearch,
            findNext,
            findPrevious,
            replaceNext,
            replaceAll,

            // 格式设置
            updateFontSize,
            updateFontFamily,
            toggleWordWrap,
            toggleFullscreen,

            // 事件处理
            handleKeydown,
            handleDrop,
            showContextMenu,
            updateSelection
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
